<template>
  <div class="register-container">
    <div class="register-box">
      <h2 class="register-title">用户注册</h2>
      <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
      >
        <el-form-item label="请输入账号" prop="username">
          <el-input v-model="ruleForm.username" placeholder="请设置您的账号"/>
        </el-form-item>
        <el-form-item label="请输入密码" prop="password">
          <el-input v-model="ruleForm.password" type="password" placeholder="请设置您的密码"/>
        </el-form-item>
        <el-form-item label="请确认密码" prop="rePassword">
          <el-input v-model="ruleForm.rePassword" type="password" placeholder="请再次输入密码"/>
        </el-form-item>
        <el-form-item class="btn-group">
          <el-button type="primary" @click="submitForm">
            返回登录
          </el-button>
          <el-button type="success" @click="checkRePassword">
            立即注册
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'

import {ElMessage} from "element-plus";
import router from "@/router/index.js";
import {zhuce1} from "@/assets/zhuce.js";
const ruleFormRef = ref()
const ruleForm = ref({
  username:'',
  password:'',
  rePassword:''
})

const rules = ref({
  username: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
  ],
  password: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
  ]
})
function submitForm(){
  router.push("/")
}
function checkRePassword(){
  zhuce1(ruleForm.value).then(res=>{
    if(ruleForm.value.password!=ruleForm.value.rePassword){
      ElMessage.error("俩次密码输入不一致！")
    }else{
      ElMessage.success("注册成功")
      router.push("/")
    }
  })
}


const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}


</script>

<style scoped>
.register-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #67C23A 0%, #409EFF 100%);
  background-size: cover;
  background-position: center;
}

.register-box {
  width: 450px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.register-title {
  text-align: center;
  margin-bottom: 30px;
  color: #67C23A;
  font-size: 24px;
}

.btn-group {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

:deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #dcdfe6 inset;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #67C23A inset;
}
</style>
